<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>歌曲上传系统登录</title>

    <link rel="stylesheet" type="text/css" th:href="@{/static/upload/css/login.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/upload/css/bjstyle.css}"/>

    <script type="text/javascript" src="../static/upload/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        // $(function(){
        // 	$(".screenbg ul li").each(function(){
        // 		$(this).css("opacity","0");
        // 	});
        // 	$(".screenbg ul li:first").css("opacity","1");
        // 	var index = 0;
        // 	var t;
        // 	var li = $(".screenbg ul li");
        // 	var number = li.size();
        // 	function change(index){
        // 		li.css("visibility","visible");
        // 		li.eq(index).siblings().animate({opacity:0},3000);
        // 		li.eq(index).animate({opacity:1},3000);
        // 	}
        // 	function show(){
        // 		index = index + 1;
        // 		if(index <= number-1){
        // 			change(index);
        // 		}else{
        // 			index = 0;
        // 			change(index);
        // 		}
        // 	}
        // 	t = setInterval(show,8000);
        // 	//根据窗口宽度生成图片宽度
        // 	var width = $(window).width();
        // 	$(".screenbg ul img").css("width",width+"px");
        // });
    </script>

</head>

<body>
<div id="background" class="wall"></div>
<div id="midground" class="wall"></div>
<div id="foreground" class="wall"></div>
<div id="top" class="wall"></div>
<div class="login-box">
    <h1>音乐上传系统后台登录</h1>
    <form id="form" action="/musicUpload" method="post">
        <p th:if="${error!=null}" th:text="${error}" style="margin-top: 30px; color: red;"></p>
        <div class="name">
            <label>手机号：</label>
            <input id="phone" type="text" name="phone" tabindex="1" autocomplete="off"/>
        </div>
        <!--<div class="password">-->
        <!--<label>验证码：</label>-->
        <!--<input type="password" name="" maxlength="16" id="" tabindex="2"/>-->
        <!--</div>-->
        <div class="code">
            <label>验证码：</label>
            <input type="text" name="ver" id="ver" tabindex="3"/>
            <div class="codeImg">
                <button type="button" class="but" onclick="yzm()">发送验证码</button>
            </div>
        </div>
        <!--<div class="remember">-->
        <!--<input type="checkbox" id="remember" tabindex="4">-->
        <!--<label>记住密码</label>-->
        <!--</div>-->
        <div style="margin-top: 30px"></div>
        <div class="login">
            <button id="submit" type="submit" value="登  录" tabindex="5" class="button">登   录</button>
        </div>
    </form>


</div>


<!--<div class="screenbg">-->
<!--<ul>-->
<!--<li><a href="javascript:;"><img src="../static/upload/img/0.jpg"></a></li>-->
<!--<li><a href="javascript:;"><img src="../static/upload/img/1.jpg"></a></li>-->
<!--<li><a href="javascript:;"><img src="../static/upload/img/2.jpg"></a></li>-->
<!--</ul>-->
<!--</div>-->

</body>
<script>
    $("#submit").click(function () {
        var phone = $("#phone").val()
        var ver = $("#ver").val()
        alert(disabled)

        if (!(/^1[34578]\d{9}$/.test(phone))) {
            alert("手机号码有误，请重填");
            return false;
        }else if (!(/^\d{6}$/.test(ver))){
            alert("请输入6位验证码")
            return false;
        }else {
            $("#submit").attr('disabled',"true")
            $("#submit").submit()
        }
    })
    // $("#submit").click(function () {
    //     var phone=document.getElementById("phone").value;
    //     var ver=document.getElementById("ver").value;
    //     if(!(/^1[34578]\d{9}$/.test(phone))) {
    //         alert("手机号码有误，请重填");
    //         return false;
    //     }else {
    //         alert(phone+"---"+ver)
    //         $.ajax({
    //             url:"http://localhost:8088/musicUpload",
    //             type:"get",
    //             dataType:'json',
    //             data:{"phone":phone,"ver":ver},
    //             success:function (data) {
    //                 alert(data.error)
    //             }
    //         })
    //     }
    //
    // })

    function yzm() {
        var phone = document.getElementById("phone").value;
        alert(phone)
        if (!(/^1[34578]\d{9}$/.test(phone))) {
            alert("手机号码有误，请重填");
            return false;
        } else {
            $.ajax({
                url: "http://localhost:8088/getVer",
                type: "get",
                dataType: 'json',
                data: {"phone": phone},
                success: function (data) {
                    console.log(data.msg)
                }
            })
        }
    }
</script>
</html>
